<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
</head>
<body>
<canvas height="600" id="canvas" style="background-color: aliceblue;" width="1000">您的浏览器不支持canvas</canvas>
</body>
<script>
  class Draw {
    //   画图方法
    constructor(ctx) {
      this.ctx = ctx
    }

    //画直线
    drawLine() {
      this.ctx.moveTo(10, 10); // 开始位置
      this.ctx.lineTo(100, 10);
      this.ctx.lineWidth = 10;
      this.ctx.strokeStyle = 'red';
      this.ctx.stroke();
    }

    // rect
    drawRect() {
      this.ctx.strokeStyle = 'red';
      this.ctx.strokeRect(10, 50, 40, 20);

      this.ctx.fillStyle = 'red';
      this.ctx.fillRect(60, 50, 40, 20);
    }

    /* ctx.arc(x,y,radius,start,end,anticlockwise) -
     绘制圆形或扇形 上述的参数中，x,y 表示圆心的坐标，radius 是半径，start 开始弧度，end 结束弧度，anticlockwise 表示是否是逆时针。
 */

    // arc
    drawArc() {
      this.ctx.beginPath();
      this.ctx.arc(100, 150, 50, Math.PI * 2, false);
      this.ctx.closePath();
      this.ctx.lineWidth = 5;
      this.ctx.strokeStyle = 'red';
      this.ctx.stroke();
      this.ctx.fillStyle = 'green'
      this.ctx.fill();
    }

    //绘制文本
    drawText() {
      this.ctx.fillStyle = 'red';
      this.ctx.font = 'bold 40px 微软雅黑';
      this.ctx.fillText('实心文本', 150, 200);

      this.ctx.strokeStyle = 'green';
      this.ctx.font = 'bold 40px 微软雅黑';
      this.ctx.lineWidth = 1;
      this.ctx.strokeText('空心文本', 150, 250)
    }

    // 绘制阴影
    drawShadow() {
      this.ctx.shadowOffsetX = 5
      this.ctx.shadowOffsetY = 5
      this.ctx.shadowBlur = 10
      this.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
      this.ctx.fillStyle = 'red'
      this.ctx.fillRect(0, 300, 200, 100)
    }

    // gradient
    drawGradient() {
      const grd = this.ctx.createLinearGradient(0, 400, 400, 400)
      grd.addColorStop(0, '#4dffff')
      grd.addColorStop(1, '#8e12aa')
      this.ctx.fillStyle = grd
      this.ctx.font = 'bold 40px 微软雅黑'
      this.ctx.fillText('学习canvas', 0, 500)
    }

    //画一个五角星
    //context：canvas画柄，r：小圆半径，R：大圆半径，x：圆心x左边，y：圆心y坐标
    drawStar(r, R, x, y) {
      this.ctx.beginPath()
      for (let i = 0; i < 5; i++) {
        this.ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72) / 180 * Math.PI) * R + y)
        this.ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72) / 180 * Math.PI) * r + y)
      }
      this.ctx.closePath()
      this.ctx.fillStyle = "red"  //填充样式
      this.ctx.strokeStyle = "black" //笔画样式
      this.ctx.fill() //执行填充
      this.ctx.stroke() //执行画笔
    }


  }

  window.onload = function () {
    const canvas = document.querySelector('#canvas')
    const ctx = canvas.getContext('2d')
    const draw = new Draw(ctx)
    // 一些画图操作
    // 绘制线段
    draw.drawLine()
    // 绘制矩形
    draw.drawRect()
    //画圆
    draw.drawArc()
    //文本
    draw.drawText()
    // 阴影
    // draw.drawShadow()
    // 渐变色
    draw.drawGradient()
    // 五角星
    draw.drawStar(10, 20, 400, 250)


  }


</script>
</html>